<!DOCTYPE html>
<html lang="en">
<head>

    <title>品牌目录</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <script>
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- //Meta tag Keywords -->

    <!-- Custom-Files -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- Bootstrap-Core-CSS -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
    <!-- Style-CSS -->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <!-- Font-Awesome-Icons-CSS -->
    <!-- //Custom-Files -->

    <!-- Web-Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Oxygen:300,400,700&amp;subset=latin-ext" rel="stylesheet">
    <!-- //Web-Fonts -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css"  media="all">
    <script src="./layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<form  id="pinglun" style="display:none"  class="layui-form" action="" lay-filter="example">
    <div class="layui-form-item">
        <label class="layui-form-label">名字</label>
        <div class="layui-input-block">
            <input type="text" name="user" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">星级</label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
        <div  id="star"></div>
        <input id="number" name="star" type="text" value="" class="satisfaction" style="display: none">
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">评论</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" name="comment"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="hidden" name="bid" value="" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="formDemo1">立即提交</button>
        </div>
    </div>
</form>

<body>
<script src="./layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['rate','jquery'], function() {
        var rate = layui.rate;
        $ = layui.jquery;
        rate.render({
            elem: '#star'
            , value: 0 //初始值
            , half: true //开启半星
            , text: true
            ,setText:function(value){
                var arrs = {
                };
                this.span.text(arrs[value]);
                $("#number").val(value);
            }
        })

    });
</script>
<body>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<!-- main banner -->
<div class="main-top" id="home">
    <!-- header -->
    <header>
        <div class="container-fluid">
            <div class="header d-md-flex justify-content-between align-items-center py-3 px-xl-5 px-lg-3 px-2">
                <!-- logo -->
                <div id="logo">
                    <h1><a href="index.html">Elvis</a></h1>
                </div>
                <!-- //logo -->
                <!-- nav -->
                <div class="nav_w3ls">
                    <nav>
                        <label for="drop" class="toggle">Menu</label>
                        <input type="checkbox" id="drop" />
                        <ul class="menu">
                            <li><a href="index.html" class="active">首页</a></li>
                            <li><a href="about.html">关于我们</a></li>
                            <li><a href="brand.html?bcategory=all">所有品牌</a></li>
                            <li><a href="contact.html">联系我们</a></li>
                        </ul>
                    </nav>
                </div>
                <!-- //nav -->
            </div>
        </div>
    </header>
    <!-- //header -->
    <!-- banner -->
    <div class="banner_w3lspvt-2">

    </div>
    <!-- //banner -->
</div>
<!-- //main banner -->

<!-- page details -->
<div class="breadcrumb-mobamu">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="index.html">首页</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">品牌介绍</li>
    </ol>
</div>
<!-- //page details -->

<!-- 显示前几的名字和图片 -->
<!-- services -->
<div class="serives-mobamu py-5" id="services">
    <div class="container py-xl-5 py-lg-3">
        <h3 id="xuanze1" class="tittle text-center text-wh font-weight-bold"></h3>
        <p class="sub-tittle text-center text-li mt-2 mb-sm-5 mb-4 pb-xl-3">我们搜集了品牌热度，实时更新热度在前三名的化妆品品牌，在这里进行展示</p>
        <div class="row welcome-bottom text-center" >
            <div class="col-lg-3 col-sm-6 px-2">
                <div style="width:250px; height:300px;" class="welcome-grid bg-wh py-5 px-4">
                    <img width="100%" height="100%" id="img1" alt="" class="img-fluid">
                    <h4 class="mt-4 mb-3 text-bl">TOP1</h4>
                    <p id="top1"></p>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 mt-sm-0 mt-5 px-2">
                <div style="width:250px; height:300px;" class="welcome-grid bg-wh py-5 px-4">
                    <img  id="img2" alt="" class="img-fluid">
                    <h4 class="mt-4 mb-3 text-bl">TOP2</h4>
                    <p id="top2"></p>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 mt-lg-0 mt-5 px-2">
                <div style="width:250px; height:300px;" class="welcome-grid bg-wh py-5 px-4">
                    <img  id="img3" alt="" class="img-fluid">
                    <h4 class="mt-4 mb-3 text-bl">TOP3</h4>
                    <p id="top3"></p>
                </div>
            </div>
            <div  class="col-lg-3 col-sm-6 mt-lg-0 mt-5 px-2">
                <div style="width:250px; height:300px;"  class="welcome-grid bg-wh py-5 px-4">
                    <img width="120%" height="120%" id="img4" alt="" class="img-fluid">
                    <h4 class="mt-4 mb-3 text-bl">TOP4</h4>
                    <p id="top4"></p>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //从当前页面的url地址中获取参数数据
    function getRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if(url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for(var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
</script>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend id="xuanze2"></legend>
</fieldset>

<!--更改top前几的名字-->
<script>
    layui.use(['element'], function(){
        var $ = layui.$;
        var request = getRequest();
        var bcategory = request.bcategory;
        //更改品牌产地
        if(bcategory == 1){
            $("#xuanze2").append("<legend>欧美品牌目录</legend>")
            $("#xuanze1").append("<h3 class=\"tittle text-center text-wh font-weight-bold\">欧美品牌TOP前四</h3>")
        }  else if(bcategory == 2){
            $("#xuanze2").append("<legend>国产品牌目录</legend>")
            $("#xuanze1").append("<h3 class=\"tittle text-center text-wh font-weight-bold\">国产品牌TOP前四</h3>")
        }else if(bcategory == 3){
            $("#xuanze2").append("<legend>日韩品牌目录</legend>")
            $("#xuanze1").append("<h3 class=\"tittle text-center text-wh font-weight-bold\">日韩品牌TOP前四</h3>")
        }else if(bcategory === 'all'){
            $("#xuanze2").append("<legend>品牌目录</legend>")
            $("#xuanze1").append("<h3 class=\"tittle text-center text-wh font-weight-bold\">品牌TOP前四</h3>")
        }
        //更改品牌前四内容
        $.ajax({
            url:'/brand/showByHeat/'+bcategory,
            type:'get',
            success:function(map) {
                $("#img1").attr("src",map.top1.blogo)
                $("#img2").attr("src",map.top2.blogo)
                $("#img3").attr("src",map.top3.blogo)
                $("#img4").attr("src",map.top4.blogo)

                $("#top1").append("<h4>"+map.top1.bname+"</h4>")
                $("#top2").append("<h4>"+map.top2.bname+"</h4>")
                $("#top3").append("<h4>"+map.top3.bname+"</h4>")
                $("#top4").append("<h4>"+map.top4.bname+"</h4>")
            }
        });
    });
</script>
<!-- //services -->
<!-- 显示所有品牌 -->
<!--更改..品牌目录-->
<script type="text/html" id="barDemo">
    <span class="fa fa-thumbs-up mr-1"></span><a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="zan">点赞</a>
    <span class="fa fa-comments mr-1"></span><a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="pinglun">评论</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" id="product1" lay-event="product" >产品介绍</a>
</script>
<script>
    //从当前页面的url地址中获取参数数据
    function getRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if(url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for(var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
</script>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var $ = layui.$;
        var request = getRequest();
        var bcategory = request.bcategory;
        var form = layui.form;
        var depttab = table.render({
            elem: '#test'
            ,url:'/brand/show/'+bcategory
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [[
                {field:'blogo', title:'图片',width:90,templet:'<div><img width="100%" height="100%" src="{{d.blogo}}"></div>'}
                ,{field:'bname', title:'品牌名',width:150}
                ,{field:'binfo', title:'品牌介绍'}
                ,{fixed:'right', title:'操作',toolbar: '#barDemo', width:250}
            ]]
        });
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'zan') {
                $.ajax({
                    url:'/brand/dianzan/'+data.bid
                    , type: "post"
                    , success: function (d) {
                        if (d === 1) {
                            layer.msg(
                                '点赞成功', {
                                    time: 1000, //20s后自动关闭
                                });
                        }
                    }
                });
            } else if(obj.event === "pinglun"){
                var uplayer = layer.open({
                    type: 1
                    ,anim: 3
                    ,area: ['600px', '400px']
                    ,content: $('#pinglun') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });

                //form自动赋值
                form.val("example", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "bid": data.bid
                });
                //提交
                form.on('submit(formDemo1)',function (data){
                    layer.close(uplayer);
                    $.ajax({
                        url:"/comment/add"
                        ,type:"post"
                        ,data:data.field
                        ,success:function (d){
                            if(d === 1){
                                layer.msg('评论成功！！！', {
                                    icon: 1,
                                    time: 1500 //2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                });
                                $("#pinglun")[0].reset();
                                layui.form.render();
                            }
                        }
                    });
                    return false;
                });
            }else if(obj.event === "product"){
				var index = layui.layer.open({
					title: "",
					type: 2,
					content: "/page/cpts_1924_cyb/product.html?bid=" + data.bid,
				});
				layui.layer.full(index);
            }
        });
    });
</script>
<!-- 尾 -->
<footer class="py-5">
    <div class="container pt-xl-4">
        <div class="row footer-top">
            <div class="col-lg-4 col-md-6 footer-grid_section_1its">
                <h2 class="logo-2 mb-lg-4 mb-3">
                    <a href="index.html" class="text-uppercase text-wh">Elvis</a>
                </h2>
                <!-- Map -->
                <div class="map-fo">
                    <iframe src=""></iframe>
                </div>
                <!-- //Map -->
            </div>
            <div class="col-lg-2 col-md-6 footer-grid_section_1its mt-md-0 mt-4">
                <h3 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">链接</h3>
                <ul class="list-unstyled">
                    <li class="mb-3">
                        <a href="index.html">首页</a>
                    </li>
                    <li class="mb-3">
                        <a href="about.html">关于我们</a>
                    </li>
                    <li class="mb-3">
                        <a href="brand.html?bcategory=4">所有品牌</a>
                    </li>
                    <li class="mb-3">
                        <a href="#services">热度最高</a>
                    </li>
                    <li class="mb-3">
                        <a href="contact.html">联系我们</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-3 col-md-6 footer-grid_section_1its mt-lg-0 mt-4">
                <h3 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">联系方式</h3>
                <div class="contact-info">
                    <div class="footer-style-w3ls mb-4">
                        <h4 class="text-li mb-2">联系电话</h4>
                        <p>+121 098 8907 9987</p>
                    </div>
                    <div class="footer-style-w3ls mb-4">
                        <h4 class="text-li mb-2">联系邮箱 </h4>
                        <p><a href="mailto:info@example.com">info@example.com</a></p>
                    </div>
                    <div class="footer-style-w3ls mb-4">
                        <h4 class="text-li mb-2">联系地址</h4>
                        <p>Honey Avenue, New York City</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 footer-grid_section_1its mt-lg-0 mt-4">
                <!-- social icons -->
                <div class="mobamuinfo_social_icons">
                    <h3 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">感谢使用</h3>
                    <p>我们是一个公益品牌宣传网站，还在建设中，有什么不周之处敬请谅解！</p>

                </div>
                <!-- social icons -->
            </div>
        </div>
    </div>
</footer>
<!-- //footer -->
<!-- copyright -->
<div class="cpy-right text-center py-3">
    <p>Copyright &copy; 2019.Company name All rights reserved </a></p>
</div>
<!-- //copyright -->
</body>
</html>